<template>
	<view id="box">
		
		<view class="user_info_wrap">
			<view class="user_img_wrap" v-if="userinfo.avatarUrl">
				<image :src="userinfo.avatarUrl" class="user_bg"></image>
				<view class="user_info">
					<image :src="userinfo.avatarUrl" class="user_icon"></image>
					<view class="user_name">{{userinfo.nickName}}</view>
				</view>
			</view>
			<view class="user_btn" v-else>
				<button open-type="getUserInfo" @click="handleGetUserInfo"> 登录 </button>
			</view>
			<view class="">{{userinfo.nickName}}</view>
		</view>
		
		<view class="user_content">
		  
		  <view class="user_main">
		    <!-- 历史足迹 -->
		    <view class="history_wrap">
		      <navigator>
		        <view class="his_num">0</view>
		        <view class="his_name">收藏的店铺</view>
		      </navigator>
		      <navigator url="/pages/collect/collect">
		        <view class="his_num">{{collectNums}}</view>
		        <view class="his_name">收藏的商品</view>
		      </navigator>
		      <navigator>
		        <view class="his_num">0</view>
		        <view class="his_name">关注的商品</view>
		      </navigator>
		      <navigator>
		        <view class="his_num">0</view>
		        <view class="his_name">我的足迹</view>
		      </navigator>
		    </view>
		    <!-- 我的订单 -->
		    <view class="orders_wrap">
		      <view class="orders_title">我的订单</view>
		      <view class="order_content">
		        <navigator url="/pages/order/index?type=1">
		          <view class="iconfont icon-ding_dan"></view>
		          <view class="order_name">全部订单</view>
		        </navigator>
		        <navigator url="/pages/order/index?type=2">
		          <view class="iconfont icon-fukuantongzhi"></view>
		          <view class="order_name">待付款</view>
		        </navigator>
		        <navigator url="/pages/order/index?type=3">
		          <view class="iconfont icon-receipt-address"></view>
		          <view class="order_name">待收货</view>
		        </navigator>
		        <navigator>
		          <view class="iconfont icon-tuihuotuikuan_dianpu"></view>
		          <view class="order_name">退款/退货</view>
		        </navigator>
		      </view>
		    </view>
		    <!-- 收货地址管理 -->
		    <view class="address_wrap">
		      收货地址管理
		    </view>
		    <!-- 应用信息相关 -->
		    <view class="app_info_wrap">
		      <view class="app_info_item app_info_contact">
		        <text>联系客服</text>
		        <text>400-618-4000</text>
		      </view>
		      <navigator url="/pages/feedback/feedback" class="app_info_item">意见反馈</navigator>
		      <view class="app_info_item">关于我们</view>
		    </view>
		    <!-- 推荐 -->
		    <view class="recommend_wrap">
		      把应用推荐给其他人
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					
				},
				collectNums: 0
			};
		},
		onShow() {
			this.userinfo=uni.getStorageSync("userinfo") || {};
			const collect = uni.getStorageSync('collect') || [];
			this.collectNums = collect.length;
		},
		methods: {
			handleGetUserInfo(e) {
				uni.getUserProfile({
					desc: 'weixin',
					success: res => {
						uni.setStorageSync("userinfo", res.userInfo);
						console.log(res, '授权成功');
					},
					fail: err => {
						console.log(err, '失败授权')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
	  background-color: #edece8;
	}
	#box{
		background-color: #edece8;
	}

	.user_info_wrap {
		height: 45vh;
		overflow: hidden;
		background-color: $theme-color;
		position: relative;

		.user_img_wrap {
			position: relative;

			.user_bg {
				height: 50vh;
				filter: blur(10rpx);
			}

			.user_info {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 20%;
				text-align: center;

				.user_icon {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.user_name {
					color: #fff;
					margin-top: 40rpx;
				}
			}
		}

		.user_btn {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			top: 50%;
			border: 1px solid greenyellow;
			color: greenyellow;
			font-size: 38rpx;
			padding: 10rpx;
			border-radius: 10rpx;

			button {
				background-color: $theme-color;
				border: none;
				color: greenyellow;
			}

			button::after {
				border: none;
			}
		}
	}
	
	
	.user_content{
	  position: relative;
	  .user_main{
	    padding-bottom: 100rpx;
	    color: #666;
	    position: absolute;
	    width: 90%;
	    left: 50%;
	    transform: translateX(-50%);
	    top:-40rpx;
	
	    .history_wrap{
				// box-sizing: border-box;
	      background-color: #fff;
	      display: flex;
				// margin-bottom: 50rpx;
	      navigator{
	        flex: 1;
	        text-align: center;
	        padding: 10rpx 0;
	        .his_num{
	          color: $theme-color;
	        }
	        .his_name{}
	      }
	    }
	    .orders_wrap{
	      background-color: #fff;
	      margin-top: 30rpx;
	      .orders_title{
	        padding: 20rpx;
	        border-bottom: 1rpx solid #ccc;
	      }
	      .order_content{
	        display: flex;
	        navigator{
	          padding: 15rpx 0;
	          flex: 1;
	          text-align: center;
	          .iconfont{
	            color: $theme-color;
	            font-size: 40rpx;
	          }
	          .order_name{}
	        }
	      }
	    }
	    .address_wrap{
	      margin-top: 30rpx;
	      background-color: #fff;
	      padding: 20rpx ;
	    }
	    .app_info_wrap{
	      margin-top: 30rpx;
	      background-color: #fff;
	      .app_info_item{
	        padding: 20rpx ;
	        border-bottom: 1rpx solid #ccc;
	      }
	      .app_info_contact{
	        display: flex;
	        justify-content: space-between;
	      }
	    }
	    .recommend_wrap{
	      margin-top: 30rpx;
	      background-color: #fff;
	      padding: 20rpx ;
	    }
	  }
	}
</style>
